import 'package:flutter/material.dart';
import 'package:work/pages/main/bottom_button.dart';

class AppBottomNavigationBar extends StatelessWidget {
  const AppBottomNavigationBar({
    Key? key,
    this.current = 0,
    required this.items,
    required this.onChange,
    this.onMiddle,
  }) : super(key: key);

  final int current;
  final List<AppBottomNavigationBarItem> items;
  final void Function(int) onChange;
  final void Function()? onMiddle;

  @override
  Widget build(BuildContext context) {
    return HbbBottomNavigation(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: items.map(_buildItem).toList(),
      ),
    );
  }

  Widget _buildItem(AppBottomNavigationBarItem item) {
    if (item.isMiddle) {
      return _MiddleItem(
        item.activeIcon,
        onTap: onMiddle,
      );
    }
    final index = items.indexOf(item);
    return _Item(
      item,
      selected: index == current,
      onTap: () => onChange(index),
    );
  }
}

class _Item extends StatelessWidget {
  const _Item(
    this.item, {
    Key? key,
    this.selected = false,
    this.onTap,
  }) : super(key: key);

  final AppBottomNavigationBarItem item;
  final bool selected;
  final void Function()? onTap;

  @override
  Widget build(BuildContext context) {
    final icon = selected ? item.activeIcon : item.icon;
    final color = selected ? Colors.red : Colors.blue;
    final style = TextStyle(fontSize: 10, height: 1.4, color: color);
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTap,
      child: Container(
        width: 52,
        height: 52,
        alignment: Alignment.center,
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          // ExtendedImage.asset(icon, height: 24),
          const SizedBox(height: 2),
          Text(item.text, style: style),
        ]),
      ),
    );
  }
}

class _MiddleItem extends StatelessWidget {
  const _MiddleItem(
    this.icon, {
    Key? key,
    this.onTap,
  }) : super(key: key);

  final String icon;
  final void Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(color: Colors.red, height: 48),
    );
  }
}

class AppBottomNavigationBarItem {
  /// 按钮文字
  final String text;

  /// 图片路径，建议尺寸为 81px * 81px
  final String icon;

  /// 选中时的图片路径，建议尺寸为 81px * 81px
  final String activeIcon;

  /// 是否居中显示
  final bool isMiddle;

  const AppBottomNavigationBarItem({
    this.text = '',
    this.icon = '',
    this.activeIcon = '',
    this.isMiddle = false,
  });
}

class HbbBottomNavigation extends StatelessWidget {
  /// 底部按钮常用于表单
  const HbbBottomNavigation({
    Key? key,
    this.visible = true,
    this.float,
    required this.child,
  }) : super(key: key);

  /// 是否可见
  final bool visible;

  /// 顶部浮动组件
  final Widget? float;

  /// 自定义内容
  final Widget child;

  @override
  build(BuildContext context) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 250),
      child: visible ? _buildChild() : const SizedBox.shrink(),
    );
  }

  Widget _buildChild() {
    final bottomChild = Container(
      height: 50, // 底部高度统一是50
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: child,
    );
    return Column(mainAxisSize: MainAxisSize.min, children: [
      if (float != null) float!,
      ColoredBox(
        color: Colors.white,
        child: SafeArea(
          maintainBottomViewPadding: true,
          child: bottomChild,
        ),
      ),
    ]);
  }

  /// 单个按钮
  factory HbbBottomNavigation.button({
    required String text,
    bool enable = true,
    GestureTapCallback? onTap,
  }) {
    return HbbBottomNavigation(
      child: Center(
        child: BottomButton(
          onTap: onTap,
          enable: enable,
          child: Text(text),
        ),
      ),
    );
  }
}
